<template>
  <!-- <span :class="['custom-pipe-order-state', textColor]">{{
    renderStateText
  }}</span> -->
  <el-tag :type="textColor">{{ renderStateText }}</el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue-demi';

// 状态，1-未提交资料、2-审核中、3-审核通过、4-审核拒绝、0-已作废
const props = defineProps({
  state: {
    type: [Number, String],
    default: 1,
    validator(value: number | string) {
      return [1, 2, 3, 4, 0].includes(+value);
    }
  }
});

const renderStateText = computed(() => {
  switch (+props.state) {
    case 1:
      return '未提交资料';
    case 2:
      return '审核中';
    case 3:
      return '审核通过';
    case 4:
      return '审核拒绝';
    case 0:
      return '已作废';
    default:
      return '未知状态';
  }
});

const textColor = computed(() => {
  switch (+props.state) {
    case 1:
      // return "default";
      return '';
    case 2:
      return 'warning';
    case 3:
      return 'success';
    case 4:
      return 'danger';
    case 0:
      return 'info';
    default:
      return 'danger';
  }
});
</script>

<style lang="scss" scoped>
.custom-pipe-order-state {
  &.success {
    color: #67c23a;
  }
  &.warning {
    color: #e6a23c;
  }
  &.danger {
    color: #f56c6c;
  }
  &.info {
    color: #909399;
  }
}
</style>
